/**
 * Copyright (c) 2011-2012 Tomi Paananen.
 *
 * Part of Quick Gestures user interface.
 */

import QtQuick 1.1
import QuickGestures 1.0
import "CommonUIConstants.js" as Constants

Item {
    id: gestureListItem

    property alias gestureId: visualizer.gestureId
    property bool isSelected: false
    property bool isModified: helper.isModified(gestureId)

    signal pressed(int id);
    signal selected(int id);

    state: "Playing"

    /**
     * Starts the playing animation.
     */
    function play()
    {
        state = "Stopped";
        state = "Playing";
    }

    /**
     * Rescales the visualizer content.
     */
    function rescale()
    {
        visualizer.rescale();
    }

    // Border
    Image {
        anchors.fill: parent
        source: (isSelected || listItemMouseArea.pressed) ? "qrc:/gesture-list-item-bg-selected.png"
                           : isModified ? "qrc:/gesture-list-item-bg-modified.png"
                                        : "qrc:/gesture-list-item-bg-normal.png";
    }

    GestureVisualizer {
        id: visualizer

        property int gestureId: -1
        property int margin: Constants.DEFAULT_MARGIN * 4

        width: parent.width - margin
        height: parent.height - margin
        x: (width - contentWidth + margin) / 2
        y: (height - contentHeight + margin) / 2
        lineColor: (isSelected || listItemMouseArea.pressed) ? "cyan"
                    : isModified ? "red" : "lightGray";

        Component.onCompleted: {
            gestureId = id;
            gesture = gestureModel.gestureById(id);
        }
    }

    MouseArea {
        id: listItemMouseArea
        anchors.fill: parent

        onPressed: {
            gestureListItem.pressed(visualizer.gestureId);
        }

        onPressAndHold: {
            console.debug("GestureListItem.qml: Selected gesture with ID",
                          visualizer.gestureId);
            gestureListItem.isSelected = true;
            gestureListItem.selected(visualizer.gestureId);
        }
    }

    states: [
        State {
            name: "Playing"

            PropertyChanges {
                target: visualizer
                playing: true
            }
        },
        State {
            name: "Stopped"
            when: (parent.moving || parent.flicking)

            PropertyChanges {
                target: visualizer
                playing: false
            }
        }
    ]
}

// End of file.
